<template>
  <div class="container">
    <el-button size="mini" @click.native="goBack">返回</el-button>
    <chart class="tree-chart" :autoResize="true" :options="treeOptions"></chart>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'Tree',

  props: {
    source: {
      type: Object,
      required: true,
      default () {
        return {}
      }
    }
  },

  data () {
    return {
      treeOptions: {},
      treeSource: {}
    }
  },

  mounted () {
    this.treeSource = Object.assign(this.treeSource, this.source)
    this.init()
  },

  methods: {
    init () {
      this.treeOptions = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove',
          formatter: item => item.data.label
        },
        series: [
          {
            type: 'tree',

            data: [this.treeSource],

            top: '1%',
            left: '7%',
            bottom: '1%',
            right: '20%',

            symbolSize: 7,

            label: {
              normal: {
                position: 'left',
                verticalAlign: 'middle',
                align: 'right',
                fontSize: 9,
                formatter: item => item.data.label
              }
            },

            leaves: {
              label: {
                normal: {
                  position: 'right',
                  verticalAlign: 'middle',
                  align: 'left'
                }
              }
            },

            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      }
    },

    goBack () {
      this.$emit('goBack')
    }
  }
}
</script>

<style lang="stylus" scoped>
.container
  padding 10px 20px
  min-height 100%
  background-color #fff
  .echarts
    width 100%
    min-height 100%
</style>
